<!-- 页面标注 -->
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=e1055c36e70588515b90f03a62e02c09" type="text/javascript"></script> -->
	<title>主体标注</title>
	<link rel="stylesheet" href="./styles/dimension.css">
	<link rel="stylesheet" href="./js/leaflet/leaflet.css">
	<script type="text/javascript" src="./js/leaflet/leaflet.js"></script>
</head>

<body onload="initMap()">
	<div class="point" onclick="getCurrentPoint()">
		<img src="img/point4.png" style="width: 40px;height: 40px;" />
	</div>
	<div class="bottom-content">
		<div class="point-item">
			<span class="point-text">搜索地点</span>
			<input class="point-input" id="companyName" placeholder="请输入搜索地点" />
			<button class="search-btn" onclick="startSearch()">搜索</button>
		</div>
		<div class="point-item">
			<img src="img/point4.png" class="point-icon" />
			<span class="point-text">点击重新获取当前设备位置</span>
		</div>
		<div class="point-item">
			<img src="img/point2.png" class="point-icon" style="width: 16px;margin-left: 5px;" />
			<span class="point-text" style="margin-left: 10px;">滑动屏幕选择标注位置</span>
		</div>
		<div class="point-item">
			<img src="img/yuandian.png" class="point-icon" />
			<span class="point-text">当前设备GPS坐标位置</span>
		</div>
		<div class="point-item">
			<img src="img/point.png" class="point-icon" style="width: 16px;margin-left: 5px;" />
			<span class="point-text" style="margin-left: 10px;">企业坐标位置</span>
		</div>

		<!-- 屏幕中心获取企业位置 -->
		<div class="bottom-btn">
			<button onclick="pointConfirm()" class="confirm-btn" type="buttom" style="color: #ffffff;"> 确定</button>
			<button onclick="bacPage()" class="cancell-btn" type="buttom">取消</button>
		</div>
	</div>
	<!-- 搜索结果 -->
	<div class="search-content" id="searchContent">
		<div class="search-list" id="content" onscroll="checkScroll(this)"></div>
		<div class="bottom-btn" style="">
			<button onclick="closeSearch()" class="cancell-btn" type="buttom">关闭</button>
		</div>
	</div>
	<div style="position: absolute;z-index:2" id="map"></div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/uni.webview.1.5.6.js"></script>
<script type="text/javascript" src="./js/map-util.js"></script>
<!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
<script type="text/javascript">
	//var vConsole = new window.VConsole();
	var map = null;// 地图实例
	var pageReady = false; //map加载状态
	var currentMarker = null; //当前 定位
	var labelMarker = null; //标注工具对象 
	var markers = []; // 存储搜索结果标记
	var lastPage = false;//搜索结果是否最后一页

	//初始化地图
	function initMap() {
		//获取参数
		var params = getUrlParams();
		var lng = params.lng;
		var lat = params.lat;

		// 初始化Leaflet地图
		map = L.map('map', {
			center: [39.908, 116.397], // 默认中心点（北京）
			zoom: 16,
			zoomControl: false
		});

		// 添加高德地图瓦片图层
		L.tileLayer('https://wprd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}', {
			subdomains: ['1', '2', '3', '4'],
			attribution: '&copy; 高德地图'
		}).addTo(map);

		if (lng != null && lng != '' && lng != 'undefined' && lat != null && lat != 'undefined' && lat != '') {
			// 假设传入的企业坐标是WGS84坐标系，需要转换为GCJ02
			var gcj02Coord = wgs84togcj02(parseFloat(lng), parseFloat(lat));

			//企业当前定位
			map.setView([gcj02Coord.lat, gcj02Coord.lng], 16);

			//创建标注对象
			var icon = L.icon({
				iconUrl: "img/point.png",
				iconSize: [19, 27],
				iconAnchor: [9, 27]
			});
			var marker = L.marker([gcj02Coord.lat, gcj02Coord.lng], { icon: icon }).addTo(map);
			//如果存在企业坐标，则直接添加标注
			addLabelMarker();
		} else {
			//如果不存在坐标，自动移动到当前位置
			getCurrentPoint();
		}

		//监听地图移动 
		map.on("move", function (e) {
			var center = map.getCenter();
			updateLableMarker(center.lng, center.lat);
		});

		pageReady = true;
	}

	function addLabelMarker() {
		//获取地图中心点坐标
		var center = map.getCenter();
		if (labelMarker == null) {
			//初始化一个标注工具图标
			var labelIcon = L.icon({
				iconUrl: "img/point2.png",
				iconSize: [19, 27],
				iconAnchor: [9, 27]
			});
			labelMarker = L.marker([center.lat, center.lng], { icon: labelIcon }).addTo(map);
		} else {
			labelMarker.setLatLng([center.lat, center.lng]);
		}
	}

	/**
	 * 提交地图标注信息
	 */
	function pointConfirm() {
		var latlng = labelMarker.getLatLng();

		// 由于高德地图使用GCJ02坐标系，而需要返回WGS84坐标，所以这里进行转换
		var wgs84Coord = gcj02towgs84(latlng.lng, latlng.lat);

		uni.postMessage({
			data: { type: 'result', lng: wgs84Coord.lng, lat: wgs84Coord.lat }
		})
	}

	//-----------------------------搜索-start-----------------------------
	/**
	 * 点击搜索按钮
	 */
	function startSearch() {
		//清空历史搜索结果
		var searchContent = document.getElementById("content");
		searchContent.innerHTML = '';

		// 清除之前的搜索标记
		markers.forEach(function (marker) {
			map.removeLayer(marker);
		});
		markers = [];

		lastPage = false;
		var searchQuery = document.getElementById('companyName').value;
		if (!searchQuery) {
			uni.postMessage({
				// 不要图标
				data: { type: 'toast', message: '请输入搜索关键词', icon: 'none' }
			});
			return;
		}

		// uni.postMessage({
		// 	data: { type: 'loading', message: '搜索中...' }
		// });

		$.ajax({
			url: 'http://116.130.215.195:8188/base/queryPOIByName',
			type: 'GET',
			dataType: 'json',
			data: {
				name: searchQuery
			},
			success: function (result) {
				if (result.code == 0) {

					// 关闭加载状态
					// uni.postMessage({
					// 	data: { type: 'hideLoading' }
					// });

					if (result.data && result.data.length > 0) {
						// 转换结果为所需格式
						var pois = result.data.map(function (item) {
							return {
								name: item.name,
								lonlat: item.longitude + "," + item.latitude, // Nominatim返回的是WGS84坐标
								address: `${item.city}${item.region}`
							};
						});

						// 使用现有方法处理结果
						localSearchResult({ getPois: function () { return pois; } });
					} else {
						uni.postMessage({
							data: { type: 'toast', message: result.message, icon: 'none' }
						});
					}
				}
			},
			error: function (error) {
				// 关闭加载状态
				// uni.postMessage({
				// 	data: { type: 'hideLoading' }
				// });

				uni.postMessage({
					data: { type: 'toast', message: '搜索请求失败', icon: 'error' }
				});
				console.error('搜索失败:', error);
			}
		});

		var searchBox = document.getElementById("searchContent");
		searchBox.style.display = 'block';
	}

	/**
	 * 地图关键字搜索结果
	 */
	function localSearchResult(result) {
		if (result.getPois && result.getPois()) {
			var searchContent = document.getElementById("content");
			var content = "";
			var pois = result.getPois();
			if (lastPage) {
				//最后一页了
				return;
			}
			for (var i = 0; i < pois.length; i++) {
				var lnglatArr = pois[i].lonlat.split(",");

				// var gcj02Coord = wgs84togcj02(parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1]));

				// var gcjLonlat = gcj02Coord.lng + "," + gcj02Coord.lat;

				content = content + `<div class="search-item" onclick="selectCompany('${pois[i].lonlat}')" >
							<span class="search-name">${pois[i].name}</span>
							<span class="search-address">坐标:${pois[i].lonlat}</span>
							<span class="search-address">地址:${pois[i].address}</span>
						</div>`;

				// 在地图上添加标记
				var marker = L.marker([lnglatArr[1], lnglatArr[0]], {
					icon: L.icon({
						iconUrl: "img/point.png",
						iconSize: [19, 27],
						iconAnchor: [9, 27]
					})
				}).addTo(map);
				markers.push(marker);
			}
			searchContent.innerHTML = searchContent.innerHTML + content;
			if (pois.length < 10) {
				lastPage = true;
			}
		}
	}

	/**
	 * 选中某个企业之后中心移动到此位置
	 * @param {Object} lngLat
	 */
	function selectCompany(lngLat) {
		var searchBox = document.getElementById("searchContent");
		searchBox.style.display = 'none';
		if (lngLat != null && lngLat != '') {
			var lngLatArr = lngLat.split(',');
			//移动到这个位置 (已经是GCJ02坐标，无需再转换)
			map.setView([lngLatArr[1], lngLatArr[0]], 16);
			return;
		}
		uni.postMessage({
			data: { type: 'toast', message: '没有坐标信息!', icon: 'error' }
		});
	}

	/**
	 * 关闭搜索
	 */
	function closeSearch() {
		var searchBox = document.getElementById("searchContent");
		searchBox.style.display = 'none';
	}

	function checkScroll(that) {
		var content = document.getElementById("content");
		if (that.scrollTop + that.clientHeight >= that.scrollHeight - 30) {
			// 加载下一页内容的操作
			// 这里需要实现实际的翻页功能
		}
	}

	//---------------------------搜索end----------------------------

	/**
	 * 更新中间点的标注位置
	 * @param {Object} lng
	 * @param {Object} lat
	 */
	function updateLableMarker(lng, lat) {
		if (labelMarker) {
			labelMarker.setLatLng([lat, lng]);
		}
	}

	/**
	 * 获取当前位置
	 */
	function getCurrentPoint() {
		uni.postMessage({
			data: { type: 'getCurrentPoint' }
		})
	}

	function currentPointCallback(lngLat) {
		//创建标注对象
		var icon2 = L.icon({
			iconUrl: "img/yuandian.png",
			iconSize: [19, 19],
			iconAnchor: [9, 9]
		});
		var lngLatArr = lngLat.split(",");

		// 将WGS84坐标转换为GCJ02坐标
		var gcj02Coord = wgs84togcj02(parseFloat(lngLatArr[0]), parseFloat(lngLatArr[1]));

		//使用的是GPS定位
		if (currentMarker == null) {
			currentMarker = L.marker([gcj02Coord.lat, gcj02Coord.lng], { icon: icon2 }).addTo(map);
		} else {
			currentMarker.setLatLng([gcj02Coord.lat, gcj02Coord.lng]);
		}
		//移动到这个位置 
		map.setView([gcj02Coord.lat, gcj02Coord.lng], 16);
		addLabelMarker();
	}

	//获取链接参数
	function getUrlParams() {
		var url = window.location.href;
		var params = url.split('?')[1];
		var paramsObj = {};

		if (params) {
			var paramArray = params.split('&');
			paramArray.forEach(function (param) {
				var paramSplit = param.split('=');
				paramsObj[paramSplit[0]] = paramSplit[1];
			});
		}
		return paramsObj;
	}

	function bacPage() {
		console.log('返回')
		uni.postMessage({
			data: { type: 'back' }
		})
	}
</script>

</html>